<template>
	<view>
		<title-nav :title="title"></title-nav>
		<view class="report">
			<view class="remind">
				<view class="remind-icon iconfont icon-lingdang"></view>
				<view class="remind-text">你的举报将在12小时内受理，若举报成功会第一时间告知处理结果，请尽量提交完整的举报描述及材料。</view>
			</view>
			<view class="input-box">
				<view class="report-reason">举报理由 &nbsp{{reason}}</view>
				<view class="report-title">举报描述(选填)</view>
				<textarea v-model:value="describle" placeholder="详细描述举报理由" class="report-describle" maxlength="200"/>
				<view class="report-lenght">
					<span style="color: #fe2c55">{{describle.length}}</span>/200
				</view>
			</view>
			<view class="report-btn" @click="report">提交</view>
		</view>
	</view>
</template>

<script>
	import TitleNav from '../../components/TitleNav.vue';

	export default {
		name: "report",
		data() {
			return {
				title: '举报',
				describle: '',
			};
		},
		props: ['reason'],
		components: {
			TitleNav,
		},
		methods: {
			report() {
				uni.showToast({
					icon: 'none',
					title: '提交成功，检查官正在来的路上~'
				},1000);
				setTimeout(res => {
					uni.navigateBack()
				},1000);
			}
		}
	}
</script>

<style lang="scss">
	.report {
		border-top: 1px solid #555555;

		.remind {
			padding: 10px;
			border-bottom: 1px solid #555555;
			display: flex;
			align-items: center;

			.remind-icon {
				flex: 0 0 10%;
				text-align: center;
			}

			.remind-text {
				line-height: 20px;
				font-size: 14px;
			}
		}

		.input-box {
			padding: 20px;

			.report-reason {
				margin-bottom: 30px;
			}

			.report-title {
				line-height: 36px;
			}

			.report-describle {
				line-height: 20px;
				width: 100%;
				background-color: #333333;
				border-radius: 5px;
				padding: 5px;
				box-sizing: border-box;
			}
			
			.report-lenght {
				width: 100%;
				text-align: right;
				margin-top: 10px;
			}
		}
		.report-btn {
			position: absolute;
			bottom: 20px;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fe2c55;
			border-radius: 5px;
		}
	}
</style>
